import * as React from "react";
import PropTypes from "prop-types";
import {InputGroup} from "@blueprintjs/core";
import { AppToaster} from "../../component/Toast/index";

import './index.less';

class InputPanel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.handleSureClick = this.handleSureClick.bind(this);
        this.handleCancelClick = this.handleCancelClick.bind(this);
        this.checkEmpty = this.checkEmpty.bind(this);
        this.state = {
            disabled: false,
            large: false,
            small: false,
            inputValue: {}
        }
    }

    componentDidMount() {
        const {attributes, method, values} = this.props;
        let newValues = {};
        for (let i =0; i< attributes.length;i++) {
            let key = attributes[i].key;
            newValues[key] = ""
        }
        if (method === "edit") {
            // 编辑时
            this.setState({
                inputValue: values
            });
        } else {
            // 插入时
            this.setState({
                inputValue: newValues
            });
        }
    }

    handleTagChange(key, e) {
        const {inputValue} = this.state;
        inputValue[key] = e.nativeEvent.target.value;
        this.setState({
            inputValue
        })
    }

    checkEmpty() {
        const {inputValue} = this.state;
        for (let i in inputValue) {
            if(inputValue[i] === "") {
                return false;
            }
        }
        return true;
    }

    handleSureClick() {
        if (!this.checkEmpty()) {
            AppToaster.show({ message: "有输入栏有空" });
        }
        const {method} = this.props;
        const {inputValue} = this.state;
        this.props.handleOk(inputValue, method);
    }

    handleCancelClick() {
        !!this.props.handleCancel && this.props.handleCancel();
    }

    render() {
        const {attributes, menuType, method} = this.props;
        const {disabled, large, small, inputValue} = this.state;
        return(
            <div>
                <div>
                    {attributes.map((attribute, key)=>(
                        <InputGroup
                            ref = {"input" + attribute.key}
                            disabled={disabled}
                            large={large}
                            placeholder={attribute.value}
                            rightElement={<div>{attribute.value}</div>}
                            small={small}
                            type={"text"}
                            defaultValue={inputValue[attribute.key]?inputValue[attribute.key]:""}
                            key={key}
                            onChange={this.handleTagChange.bind(this, attribute.key)}
                            disabled={(attribute.key === menuType + "Id") && method === "edit"}
                        />
                    ))}
                    <div className="inputPanel-bottom">
                        <a role="button" className="bp3-button" tabIndex="0" onClick={this.handleSureClick}>确定</a>
                        <a role="button" className="bp3-button" tabIndex="0" onClick={this.handleCancelClick}>取消</a>
                    </div>
                </div>
            </div>
        )
    }
}

InputPanel.propTypes = {
    attributes:PropTypes.array.isRequired,
    values:PropTypes.object.isRequired,
    method:PropTypes.string.isRequired,
    menuType: PropTypes.string.isRequired,
    handleOk: PropTypes.func.isRequired,
};

export default InputPanel;